<template>
  <div class="login-setting">
    <el-form ref="userForm" :model="userInfo" :rules="rules" label-width="120px" style="margin-left: 120px; margin-top: 30px">
      <el-form-item label="姓名:" prop="username">
        <el-input v-model="userInfo.username" style="width:300px" />
      </el-form-item>

      <div style="display: flex;">
        <el-form-item label="密码:" prop="password">
          <el-input ref="pwd" v-model="userInfo.password" :type="flag ? 'text':'password'" style="width:300px"
            class="pwd">
          </el-input>
        </el-form-item>
        <i class="el-icon-view" id="pwd-icon" @click="pwdFn"></i>
      </div>

      <el-form-item>
        <el-button type="primary" @click="saveEmployeeInfo">更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    getUserPhotoAPI,
    saveEmployeeInfoAPI
  } from '@/api'
  export default {
    name: 'LoginSetting',
    props: {
      employessInfo: {
        type: Object,
        default: () => ({})
      }
    },
    watch: {
      employessInfo(newVal){
        this.userInfo = {...newVal}
      }
    },
    data() {
      return {
        userInfo: {},
        flag: false, // true为显示text,false为显示password
        rules: {
          username: [{
            required: true,
            message: '用户名不能为空',
            triggler: 'blur'
          }],
          password: [{
            required: true,
            message: '密码不能为空',
            triggler: 'blur'
          }]
        }
      }
    },
    created() {
      // this.getUserInfoFn()
    },
    methods: {
      // 根据 id 获取员工信息
      // async getUserInfoFn() {
      //   const {
      //     id
      //   } = this.$route.query
      //   const res = await getUserPhotoAPI(id)
      //   this.userInfo = res.data
      // },
      saveEmployeeInfo() {
        this.$refs.userForm.validate(async valid => {
          if(valid){
            const res = await saveEmployeeInfoAPI(this.userInfo)
            this.$message(res.message)
            this.$router.push('/employees')
          }
          return
        })

      },
      pwdFn() {
        this.flag = !this.flag
      },
    }
  }
</script>

<style lang="scss" scoped>
  #pwd-icon {
    position: relative;
    top: 12px;
    left: -24px;
  }
</style>
